// 源插件
import React, { PureComponent } from 'react';
import {
  DateDiff,
  DateStamp,
  DateString,
  FormatnumberZero,
  Mover,
  NumberDivide,
} from '@/function.js';
// 视图插件
import { Card, Form } from 'antd';
// 外部组件
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { connect } from 'dva';
// import KlineEchartsForeign from "../../../components/KlineEcharts/KlineEchartsForeign";
// css OR less预编译器
import styles from './F.less';

// 图片

/**
 *  Describe:数据连接
 */

@connect(({ foreignQuote, loading }) => ({
  foreignQuote,
  loading: loading.models.foreignQuoteRule,
}))
@Form.create()
class ForeignExchangeQuote extends PureComponent {
  componentWillMount() {}

  /**
   *  Describe:当前状态
   */

  state = {
    listLoading: false, // 加载状态
    dataSourceForeignQuote: [],
    addVisible: false,
    updateVisible: false,
    row: {},
    targetPrice: 0, // 目标价
    Visible: false,
    ExpireVisible: false,
    currency: '',
    dataDate: '',
  };

  dataSourceChange() {
    const { dispatch } = this.props;
    const that = this;
    dispatch({
      type: 'foreignQuote/GetMailOptionPrice',
      payload: {},
      callback: res => {
        const { list } = res;
        const Element = [];
        for (let i = 0; i < list.length; i++) {
          const item = list[i];
          const ElementItem = (
            <tr>
              <td style={{ textAlign: 'left' }} colSpan="1" rowSpan="1">
                {item.option}
              </td>
              <td style={{ textAlign: 'right' }} colSpan="1" rowSpan="1">{`${item.premium}%`}</td>
              <td style={{ textAlign: 'left' }} colSpan="1" rowSpan="1" className={styles.ggg}>
                {item.moneyType}
              </td>
              <td style={{ textAlign: 'right' }} colSpan="1" rowSpan="1">
                {item.ubsCurrentPrice}
              </td>
              <td style={{ textAlign: 'right' }} colSpan="1" rowSpan="1">
                {item.ubsStrikePrice}
              </td>
              <td
                style={{ textAlign: 'right', borderRightWidth: '2px' }}
                colSpan="1"
                rowSpan="1"
                className={item.ubsFlag ? styles.fff : ''}
              >
                {NumberDivide(mathService.mul(item.ubsKs, 100), 2, '%')}
              </td>
              <td style={{ textAlign: 'right' }} colSpan="1" rowSpan="1">
                {item.bochkCurrentPrice}
              </td>
              <td style={{ textAlign: 'right' }} colSpan="1" rowSpan="1">
                {item.bochkStrikePrice}
              </td>
              <td
                style={{ textAlign: 'right', borderRightWidth: '2px' }}
                colSpan="1"
                rowSpan="1"
                className={item.bochkFlag ? styles.fff : ''}
              >
                {NumberDivide(mathService.mul(item.bochkKs, 100), 2, '%')}
              </td>
              <td style={{ textAlign: 'right' }} colSpan="1" rowSpan="1">
                {item.citiCurrentPrice}
              </td>
              <td style={{ textAlign: 'right' }} colSpan="1" rowSpan="1">
                {item.citiStrikePrice}
              </td>
              <td
                style={{ textAlign: 'right', borderRightWidth: '2px' }}
                colSpan="1"
                rowSpan="1"
                className={item.citiFlag ? styles.fff : ''}
              >
                {NumberDivide(mathService.mul(item.citiKs, 100), 2, '%')}
              </td>
              <td style={{ textAlign: 'right' }} colSpan="1" rowSpan="1">
                {item.msCurrentPrice}
              </td>
              <td style={{ textAlign: 'right' }} colSpan="1" rowSpan="1">
                {item.msStrikePrice}
              </td>
              <td
                style={{ textAlign: 'right' }}
                colSpan="1"
                rowSpan="1"
                className={item.msFlag ? styles.fff : ''}
              >
                {NumberDivide(mathService.mul(item.msKs, 100), 2, '%')}
              </td>
            </tr>
          );
          Element.push(ElementItem);
        }
        that.setState({
          dataSourceForeignQuote: Element,
          dataDate: list[0].dataDate || null,
        });
      },
    });
  }

  render() {
    const { dataDate, dataSourceForeignQuote } = this.state;
    return (
      <PageHeaderWrapper>
        <Card>
          <table border="true" style={{ width: '100%' }} className={styles.tableUse}>
            <tbody>
              <tr>
                <td style={{ textAlign: 'center' }} colSpan="2" rowSpan="1">
                  {dataDate}
                </td>
                <td colSpan="1" rowSpan="1" />
                <td colSpan="1" rowSpan="1" />
                <td colSpan="1" rowSpan="1" />
                <td
                  style={{ textAlign: 'center', borderRightWidth: '2px' }}
                  colSpan="1"
                  rowSpan="1"
                />
                <td colSpan="1" rowSpan="1" />
                <td colSpan="1" rowSpan="1" />
                <td
                  style={{ textAlign: 'center', borderRightWidth: '2px' }}
                  colSpan="1"
                  rowSpan="1"
                />
                <td colSpan="1" rowSpan="1" />
                <td colSpan="1" rowSpan="1" />
                <td
                  style={{ textAlign: 'center', borderRightWidth: '2px' }}
                  colSpan="1"
                  rowSpan="1"
                />
                <td colSpan="1" rowSpan="1" />
                <td colSpan="1" rowSpan="1" />
                <td colSpan="1" rowSpan="1" />
              </tr>
              <tr>
                <td style={{ textAlign: 'left' }} colSpan="1" rowSpan="1" />
                <td style={{ textAlign: 'center' }} colSpan="1" rowSpan="1" />
                <td style={{ textAlign: 'center' }} colSpan="1" rowSpan="1" />
                <td
                  style={{ textAlign: 'center', borderRightWidth: '2px' }}
                  colSpan="3"
                  rowSpan="1"
                  className={styles.yellow}
                >
                  瑞银
                </td>
                <td
                  style={{ textAlign: 'center', borderRightWidth: '2px' }}
                  colSpan="3"
                  rowSpan="1"
                  className={styles.yellow}
                >
                  中银
                </td>
                <td
                  style={{ textAlign: 'center', borderRightWidth: '2px' }}
                  colSpan="3"
                  rowSpan="1"
                  className={styles.yellow}
                >
                  花旗
                </td>
                <td
                  style={{ textAlign: 'center' }}
                  colSpan="3"
                  rowSpan="1"
                  className={styles.yellow}
                >
                  摩根
                </td>
              </tr>
              <tr>
                <td style={{ textAlign: 'left' }} colSpan="1" rowSpan="1">
                  类型
                </td>
                <td style={{ textAlign: 'left' }} colSpan="1" rowSpan="1">
                  权利金
                </td>
                <td style={{ textAlign: 'left' }} colSpan="1" rowSpan="1">
                  货币
                </td>
                <td style={{ textAlign: 'left' }} colSpan="1" rowSpan="1">
                  现价
                </td>
                <td style={{ textAlign: 'right' }} colSpan="1" rowSpan="1">
                  行使价
                </td>
                <td style={{ textAlign: 'right', borderRightWidth: '2px' }} colSpan="1" rowSpan="1">
                  K/S
                </td>
                <td colSpan="1" rowSpan="1">
                  现价
                </td>
                <td style={{ textAlign: 'right' }} colSpan="1" rowSpan="1">
                  行使价
                </td>
                <td style={{ textAlign: 'right', borderRightWidth: '2px' }} colSpan="1" rowSpan="1">
                  K/S
                </td>
                <td colSpan="1" rowSpan="1">
                  现价
                </td>
                <td style={{ textAlign: 'right' }} colSpan="1" rowSpan="1">
                  行使价
                </td>
                <td style={{ textAlign: 'right', borderRightWidth: '2px' }} colSpan="1" rowSpan="1">
                  K/S
                </td>
                <td colSpan="1" rowSpan="1">
                  现价
                </td>
                <td style={{ textAlign: 'right' }} colSpan="1" rowSpan="1">
                  行使价
                </td>
                <td style={{ textAlign: 'right' }} colSpan="1" rowSpan="1">
                  K/S
                </td>
              </tr>
              {dataSourceForeignQuote}
            </tbody>
          </table>
        </Card>
      </PageHeaderWrapper>
    );
  }

  componentDidMount() {
    this.dataSourceChange();
  }

  componentWillUnmount() {}
}

export default ForeignExchangeQuote;
